﻿
//设置当前Tab选项卡，并显示关联的div内容页，同时隐藏掉兄弟内容页
function setCurrentTab(jqli/*接受一个Jquery对象*/) {
    if (jqli.size() <= 0) return;
    //设置当前Tab选项卡
    jqli.addClass("tab-current").siblings().removeClass("tab-current");

    var timeSpan = jqli.attr("id");
    if (timeSpan == "") return;
    //显示时间戳关联的div，并隐藏其他的兄弟div
    var relDiv = $("#tabContent_" + timeSpan);
    relDiv.siblings("div").hide().end().show("slow");
}

//设置当前选项卡的内容页,存在就直接显示，否则就创建并显示出来 
function setCurrentTabContent(timeSpan, url) {
    var tabContent = $("#tabContent_" + timeSpan); //div
    if (tabContent.size()) {
        tabContent.siblings().hide().end().show("slow");
    }
    else {
        //点击链接时打开一个tab页，以后为了方便切换tab而无需重新加载，这里我们动态创建一个div，并与关联的li有着一样的时间戳，加载html
        //同时需要隐藏其他的类似容器
        tabContent = $("<div id=\"tabContent_" + timeSpan + "\" class=\"hide\"></div>");

        $.ajax({
            type: "post",
            url: url,
            beforeSend: function () {
                showDialogWithoutTitleBar();
            },
            success: function (data, status) {
                $("#main-container").append(tabContent);
                tabContent.html(data);
                tabContent.siblings().hide().end().show("slow");
                setButton();
            },
            complete: function () {
                closeDialog();
            },
            error: function (responseText) {
                alert("加载失败");
            }
        });
    }
}

//点击菜单上的li,给其一个唯一标识（时间戳），说明已经打开选项卡了。
//说明，站点上所有需要创建选项卡的Link基本上都需要一个标识（时间戳）
function openOneTab() {
    $("#nav-menu a").click(function () {
        //设置标识
        var existTimeSpan = $(this).attr("timeSpan");
        if (existTimeSpan == "undefined" || existTimeSpan == null || existTimeSpan.length <= 0) {
            existTimeSpan = new Date().getTime();
            $(this).attr("timeSpan", existTimeSpan);
        }

        //查找打开的选项卡中是否存在给定标识的选项卡，不存在就创建，否则设置该选项卡为当前选项卡
        var tab = $("#" + existTimeSpan); //li
        if (tab.size() <= 0) {
            tab = $("<li class=\"tab-current\" id=\"" + existTimeSpan + "\"><a href=\"#\">" + $(this).text() + "<span>x</span></a></li>");
            $("#nav-tab ul").append(tab);
            tab.siblings().removeClass("tab-current");
        }
        else {
            setCurrentTab(tab);
        }

        setCurrentTabContent(existTimeSpan, $(this).attr("href"));
        return false;
    });
}

//关闭Tab
function bindClose() {

    $("#nav-tab span").live("click", function () {
        //移除tab选项卡 li
        var liContainer = $(this).parent().parent();
        //如果是当前tab被移出了，则显示最近的tab,并设为当前tab,否组不需要处理
        if (liContainer.hasClass("tab-current")) {
            var liNext = liContainer.next("li");
            if (liNext.size()) {
                setCurrentTab(liNext);
            }
            else {
                var liPrev = liContainer.prev("li");
                if (liPrev.size()) {
                    setCurrentTab(liPrev);
                }
            }
        }
        liContainer.remove();
        //移除tab选卡关联的div
        var timeSpan = liContainer.attr("id");
        $("#tabContent_" + timeSpan).remove();
        //防止事件冒泡
        return false;
    });
}

//设置页面上的jquery按钮
function setButton() {
    $(".page").buttonset();
    $("#first").button({
        text: false,
        icons: { primary: "ui-icon-seek-first" }
    });
    $("#prev").button({
        text: false,
        icons: { primary: "ui-icon-triangle-1-w" }
    });
    $("#next").button({
        text: false,
        icons: { primary: "ui-icon-triangle-1-e" }
    });
    $("#last").button({
        text: false,
        icons: { primary: "ui-icon-seek-end" }
    });
    $("input[type='button']").button();
}

function showDialogWithoutTitleBar() {
    var html = "<p>we are loading hardly...</p><br/><img src=\"../Content/themes/base/images/loading.gif\" />";
    $("#dialog-content").html(html);
    //$("#dialog").dialog("option", "width", 100);
    $("#dialog").dialog('open');
    $(".ui-dialog-titlebar").hide();
}

function closeDialog() {
    $("#dialog-content").html("");
    $("#dialog").dialog("close");
}